<template>
	<view class="category">
		<template v-if="JSON.stringify(tab) != '{}'">
			<view class="tab-menu">
				<template v-for="item in tab.list">
					<view
						v-if="item.switch"
						:class="tabPage == item.id ? 'for hover' : 'for'"
						@click="clickTab(item.id,item.name)">
						<text class="text">{{item.name}}</text>
						<view></view>
					</view>
				</template>
			</view>
			<view style="width: 100%;height: 90rpx;"></view>
		</template>
		<youran-diy
			:Config="configJson"
			v-if="componentStatus"
			ref="childRef"></youran-diy>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab:{},
				tabPage:1,
				configJson:"category.json",
				componentStatus:true
			}
		},
		onUnload(){
			
		},
		mounted(){
			
		},
		onShow() {
			// 是否有通知
			this.$_isThereAnotification();
		},
		onLoad() {
			// 获取发现配置文件，主要读取发现的选项卡配置
			this.getIndexConfig();
		},
		methods: {
			// 触底事件
			onReachBottom(){
				if(this.$store.state.onReachBottomStatus){
					this.$store.commit('mutationsStateonReachBottomStatus',false)
					this.$refs.childRef.onReachBottomMethods();
				}
			},
			// 获取发现配置文件，主要读取发现的选项卡配置
			getIndexConfig(){
				uni.request({
					url:this.$_Config() + "category.json",
					success: (res) => {
						if(res.data.tab.switch){
							this.tab = res.data.tab;
						}
					}
				})
			},
			// 点击切换卡
			clickTab(id,name){
				// 获取首页配置文件，主要读取首页的选项卡配置
				this.getIndexConfig();
				this.componentStatus = false;
				this.tabPage = id;
				uni.setNavigationBarTitle({ title: name })
				if(id == 1){
					this.configJson = 'category.json';
				}
				if(id == 2){
					this.configJson = 'category_2.json';
				}
				if(id == 3){
					this.configJson = 'category_3.json';
				}
				if(id == 4){
					this.configJson = 'category_4.json';
				}
				if(id == 5){
					this.configJson = 'category_5.json';
				}
				setTimeout(() => {
					this.componentStatus = true;
				}, 100);
			},
		},
		// 微信分享
		onShareAppMessage(res) {
			return {
				title: this.webName,
				path: '/pages/category/category'
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: this.webName,
				path: '/pages/category/category'
			}
		},
		// 下拉，加载
		onPullDownRefresh() {
			if(this.tabPage == 1){
				this.componentStatus = false;
				this.configJson = 'category.json';
				setTimeout(() => {
					this.componentStatus = true;
					uni.stopPullDownRefresh();
				}, 100);
			}
			if(this.tabPage == 2){
				this.componentStatus = false;
				this.configJson = 'category_2.json';
				setTimeout(() => {
					this.componentStatus = true;
					uni.stopPullDownRefresh();
				}, 100);
			}
			if(this.tabPage == 3){
				this.componentStatus = false;
				this.configJson = 'category_3.json';
				setTimeout(() => {
					this.componentStatus = true;
					uni.stopPullDownRefresh();
				}, 100);
			}
			if(this.tabPage == 4){
				this.componentStatus = false;
				this.configJson = 'category_4.json';
				setTimeout(() => {
					this.componentStatus = true;
					uni.stopPullDownRefresh();
				}, 100);
			}
			if(this.tabPage == 5){
				this.componentStatus = false;
				this.configJson = 'category_5.json';
				setTimeout(() => {
					this.componentStatus = true;
					uni.stopPullDownRefresh();
				}, 100);
			}
		},
	}
</script>

<style lang="scss">
.category{
	.tab-menu{
		width: 750rpx;
		height: 90rpx;
		background: $BeiJingSe;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top:var(-window-top);
		left: 0;
		z-index: 999;
		.for{
			width: 150rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-flow: column;
			position: relative;
			.text{
				font-size: 32rpx;
				line-height: 32rpx;
				color: $ZhanWeiSe;
			}
		}
		.hover{
			.text{
				color: $YuanSe;
			}
			view{
				width: 40rpx;
				height: 10rpx;
				background: $HuangSe;
				border-radius: 100rpx;
				position: absolute;
				left: 55rpx;
				bottom: 15rpx;
			}
		}
	}
}
</style>